<template>
  <search-table
    :data="vulnerabilityList"
    :columns="columns"
    :page.sync="queryParams.pageIndex"
    :size.sync="queryParams.pageSize"
    :total="vulnerabilityTotal"
    :loading="vulnerabilityLoading"
    @queryFun="getNewData">
    <template slot="search">
      <Select filterable clearable v-model="queryParams.level" @on-change="selectLevel" placeholder="漏洞评级" style="margin-left: 15px;width: 150px">
        <Option v-for="industry in LEVEL_TYPE_OPTIONS" :key="industry.value" :value="industry.value">{{industry.label}}</Option>
      </Select>
      <Input v-model.trim="queryParams.name"  clearable placeholder="漏洞名称" @on-change="searchName" style="width: 180px;margin-left: 15px" />
      <Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshList()">
        <i class="el-icon-refresh-right" />
      </Button>
    </template>
    <Modal
      v-model="modalDeatilData.show"
      title="漏洞详情"
      footer-hide
      class="my-modal">
      <div class="item-table">
        <p>
          <span class='label'>组件名称</span>
          <span>{{ detailInfo.name }}</span>
        </p>
        <p>
          <span class='label'>组件类型</span>
          <span>{{ productPartTypeEscape(detailInfo.type).text }}</span>
        </p>
        <p>
          <span class='label'>漏洞评级</span>
          <span>{{ vulnerabilityLevelEscape(detailInfo.level).text }}</span>
        </p>
<!--        <p>-->
<!--          <span class='label'>版本号</span>-->
<!--          <span>{{ detailInfo.version }}</span>-->
<!--        </p>-->
<!--        <p>-->
<!--          <span class='label'>分组</span>-->
<!--          <span>{{ detailInfo.groupId }}</span>-->
<!--        </p>-->
        <p>
          <span class='label'>漏洞名称</span>
          <span>{{ detailInfo.vulnerabilityName }}</span>
        </p>
        <p>
          <span class='label'>CVE</span>
          <span>{{ detailInfo.cve }}</span>
        </p>
<!--        <p>-->
<!--          <span class='label'>风险评分</span>-->
<!--          <span>{{ detailInfo.lastInheritedRiskScore }}</span>-->
<!--        </p>-->
<!--        <p>-->
<!--          <span class='label'>关联部件数</span>-->
<!--          <span><Button size="small" type="info">{{ detailInfo.partNum }}</Button></span>-->
<!--        </p>-->
<!--        <p>-->
<!--          <span class='label'>关联组件数</span>-->
<!--          <span><Button size="small" type="info" >{{ detailInfo.componentNum }}</Button></span>-->
<!--        </p>-->
        <p>
          <span class='label'>发现时间</span>
          <span>{{ detailInfo.discoverTime }}</span>
        </p>
      </div>
    </Modal>
  </search-table>
</template>
<script>

import {getTestDiscoveredVulnerabilitiesPage} from '../api/testTwoRestart.js'


import AddLeakManage from "./addLeakManageFormExper.vue";
import {leakTableCol} from "../configData/leakTableCol";
//import {getAllTestObjects,getAllTestItems,getALLTestCase,getAllTestGroup,getAllNetwork} from '@/view/testServe/testProject/mixLogic/testProjectData.js'
import {mapState} from "vuex";
import {deleteProductVulnerability, queryVulnerabilityListNew} from "../../vulnerability/api/vulnerability";
import {vulnerabilityLevelEscape} from "../../vulnerability/logic/vulnerabilityLogic";
import {productPartTypeEscape} from "../logic/assetLogic";
import {deleteProductComponentLink} from "../api/productComponentLink";
import {LEVEL_TYPE_OPTIONS} from '../../paramsConfig'

export default {
  name:'leakManageDo',
  components: {AddLeakManage},
  props:{
    productId:{
      type:String,
      default:''
    }
  },
  data(){
    return{
      vulnerabilityLevelEscape,
      productPartTypeEscape,
      LEVEL_TYPE_OPTIONS,
      modalDeatilData:{
        show:false
      },
      detailInfo:{},
      vulnerabilityList:[],
      queryParams:{
        pageIndex:1,
        pageSize:10,
      },
      vulnerabilityTotal:0,
      vulnerabilityLoading:false,
      networkMeshList:[],
      targetList:[],
      testCaseList:[],
      testItemList:[],
      userGroup:[],
      showLoading:true,
      columns:[],
      isMountedLoad:false,
      features:[],
      opList:[
        {
          txt: '详情',
          fun: (obj) => {
            this.detailInfo = obj
            this.modalDeatilData.show = true
          }
        },
        // {
        //   txt: '日志',
        //   fun:(obj)=>{
        //
        //   }
        // },
        {
          txt: '删除',
          tooltip: true,
          title: '确定要删除吗？',
          fun:(obj)=>{
            this.deleteItem(obj.id);
          }
        },
        // {
        //   txt: '更多',
        //   expressions:'more',
        //   btns:[
        //     {
        //       label:'下载附件',
        //       value:'down',
        //       disabledFn:(obj)=>{
        //         return !obj.fileId;
        //       }
        //     },
        //     // {label:'关闭漏洞',value:'close'}
        //   ],
        //   fn:(name,obj)=>{
        //     switch (name){
        //       case 'down':this.downLoadAnnex(obj);break;
        //       case 'close':this.closeBug(obj);break;
        //       default:break;
        //     }
        //   }
        // }
      ],
    }
  },
  methods:{
    getNewData(){
      this.vulnerabilityLoading = true
      let params = this.queryParams;
      params.productId = this.productId||this.$route.query.productId;
      params.partId = this.$route.query.id
      getTestDiscoveredVulnerabilitiesPage(params)
          .then(res => {
            if (res.code == 1) {
              this.vulnerabilityTotal =res.data.total;
              this.vulnerabilityList = res.data.items
            }else{
              this.$Message.error(res.message);
            }

          })
          .finally(() => {
            this.vulnerabilityLoading = false
          })
    },
    selectLevel(){
      this.queryParams.pageIndex = 1;
      this.getNewData()
    },
    searchName(){
      this.queryParams.pageIndex = 1;
      this.getNewData()
    },
    refreshList(){
      this.queryParams = {
        pageIndex: 1,
        pageSize: 10,
      }
      this.getNewData();
    },
    // 删除外部链接
    deleteItem(id) {
      deleteProductVulnerability(id).then(({ code, message }) => {
        if (code !== 1) {
          this.$Message.warning(message)
          return
        }
        this.$Message.success(`删除成功`)
        // 删除后展示当前页，当前页没有数据展示前一页
        this.queryParams.pageIndex = (this.vulnerabilityList.length === 1 && this.queryParams.pageIndex > 1) ?
          this.queryParams.pageIndex - 1 : this.queryParams.pageIndex;
        this.getNewData();
      }).catch(() => {
        this.$Message.error(`删除异常`)
      })
    },
    queryList(){
      let queryParams = this.$refs.cusdomForm.formData;
      let passParams = {
        testProjectId:this.$route.query.testId,
        pageIndex:1,
        pageSize:7,
        ...queryParams
      }
      this.$refs.tableContent.setExtarQueryParams(passParams,true)
    },
    downLoadAnnex(item){
      if(!item.fileId){
        return;
      }
      this.$CommonFn.downLoadFile('ID',item.fileId,item.fileName)
    },
    closeBug(item){

    },
    init(){
      //this.getNewData();
    },
  },
  created() {
    //this.initSearchFn();
    this.columns = leakTableCol(this);
  },
  mounted() {
    this.getNewData();
  },
  computed:{
    ...mapState('testDetail',['testDetailObj'])
  }

}
</script>
<style scoped>
.search{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bug-content{
  height: 100%;
  display: flex;
  flex-direction: column;

}
.bug-content .bug-content-table{
  flex:auto;
}
.item-table {
  display: table;
  width: 100%;
  border: 1px solid #eee;
  table-layout: fixed;
  word-break: break-all;
}

.item-table p {
  display: table-row;
  line-height: 36px;
  text-align: center;
}

.item-table p span {
  display: table-cell;
  border-bottom: 1px solid #eee;
}

</style>
